<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			background-color: skyblue;
		}
		
		.father {
			width: 800px;
			height: 800px;
			position: relative;
			left: 50%;
			margin-left: -400px;
			background-color: pink;
		}
		
		.son-base {
			width: 100px;
			height: 100px;
			position: absolute;
		}
		
		.son-first {
			background-color: red;
			top: 0;
			left: 0;
			z-index: 100;
		}
		
		.son-second {
			background-color: green;
			top: 0;
			left: 100px;
			z-index: 50;
		}
		.son-relative{
			position: relative;
			width: 100%;
			height: 100px;
			background-color: yellow;
		}
	</style>

	<body>
		<div class="father">
			<div class="son-relative"></div>
			<div class="son-base son-first"></div>
			<div class="son-base son-second"></div>
		</div>
	</body>

</html>